<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/ common.css">
</head>
<body>
    <div class="nav">
        <img src="../img/主页.png" alt="">
        <span>我的博客系统</span>
        <span class="space"> </span>
         <a href="blog_list.html">主页</a>
         <a href="blog_edit.html">写博客</a>
         <a href="logout">注销</a>
    </div>
    <div class="container">
         <div class="container-left">
         <!-- 个人信息 -->
         <div class="card">
            <img  src="../img/头像2号.png" alt="">
             <h3></h3>
            <a href="https://gitee.com">gitee地址</a>
            <div class="counter">
              <span>文章</span>
              <span>分类</span>
            </div>
            <div class="counter">
                <span>1</span>
                <span>2</span>
           </div>
     </div>
</div>
         <div class="container-right">
            </div>
            </div>
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
             <script src="../js/app.js"></script>
        <script>
            //编写js代码
            //构造http请求，获取到博客列表数据，并且展示到页面上
        function getBlogs(){
        $.ajax({
         type:'get',
         url:'blog',
         success :function(body){
            //就需要根据响应的内容，构造出html片段，展示到页面上
            //由于服务器响应中已经设置了Content-Type为application/json.此时
            //jQuery就能够自动的把此处响应的内容解析成js对象数组
            //DOM文档对象模型，文档的每个对象，都会对应页面中的每个元素
       let container=document.querySelector('.container-right');
       for(let blog of body){
       //根据当前blog构造出html片段，相当于 把我的第一篇博客这句话写到了这个页面里面。
       let blogDiv=document.createElement('div');//=<div></div>
       blogDiv.className='blog';
       let titleDiv=document.createElement('div');//<div class='blog'></div>
       titleDiv.className='title'
       titleDiv.innerHTML=blog.title;     //blog是服务器返回json数组里面的一个元素，有那五个属性什么名字，标题，正文啥的
       blogDiv.appendChild(titleDiv);
      //本来titleDiv和blogDiv是两个独立的div标签，上述代码就是把titleDiv放到blogDiv的内容中，
      //  <div class="blog"
      // <div class="title">我的第一篇博客></div>
//构造发布时间
      let dateDiv=document.createElement('div');
      dateDiv.className='date';
      dateDiv.innerHTML=blog.postTime;
      blogDiv.appendChild(dateDiv);
//构造摘要信息
     let descDiv=document.createElement("div");
     descDiv.className='desc';
     descDiv.innerHTML=blog.content;
     blogDiv.appendChild(descDiv);
//构造查看全文的按钮,html中&gt是大于号，&lt小于号,使用这种转译字符
    let a=document.createElement("a");
    a.href='blog_content.html?blogId='+blog.blogId;
//      a.href='blog_content.html?blogId=';
    a.innerHTML='查看全文 &gt;&gt';
    blogDiv.appendChild(a);
    //最后把拼接好的blogDiv添加到container的后面
    container.appendChild(blogDiv);
        }
        }
        });
        }


  //js中定义的函数，不必写返回值类型，如果有参数的话，参数也不必写类型，直接写形参名字，JS是动态类型的语言
  getBlogs();
  checkLogin();
   function getUser(){
              $.ajax({
               type:'get',
               url:'user',
               success :function(body){
                  //body就是解析后的user对象了
                  let h3=document.querySelector('.card h3');
                  h3.innerHTML=body.username;
               }
              })
          }
  getUser();

</script>
</body>
</html>